<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- <input type="button" value="按钮" @click = "flag = !flag"> -->
        <input type="button" value="按钮" @click = "toggle">
        <!-- v-if的特点是:每次都会删除或者创建元素 -->
        <!-- v-if有较高的性能消耗 -->
        <!-- 如果涉及到频繁的切换，最好不要使用v-if 如果涉及到元素永远不被在显示出来，最好用v-if -->
        <h3 v-if = "flag">这是用v-if控制的元素</h3>
        
        <!-- v-show的特点是:每次不会进行dom元素的删除或者创建元素，只是每次会将自身的style中display:none切换 -->
        <!-- v-show有较高的初始渲染消耗 -->
        <h3 v-show = "flag">这是用v-show控制的元素</h3>
    </div>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flag: true
            },
            methods: {
                toggle() {
                    this.flag = !this.flag
                }
            }
        })
    </script>
</body>
</html>